<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>品名维护</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/css/oksub.css">
    <script type="text/javascript" src="/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <form>
        <div class="layui-input-inline">
            <input type="text" placeholder="名称" class="layui-input">
        </div>
        <button class="layui-btn search_btn">搜索</button>
        <button class="layui-btn layui-bg-blue addmain_btn" >添加</button>
    </form>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="/lib/layui/layui.js"></script>
<script>
    layui.use([ "element", "jquery", "table", "form", "laydate", "okLayer",
        "okUtils", "okMock" ], function() {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var okLayer = layui.okLayer;
        var okUtils = layui.okUtils;
        var okMock = layui.okMock;
        var $ = layui.jquery;

        laydate.render({
            elem : "#startTime",
            type : "datetime"
        });
        laydate.render({
            elem : "#endTime",
            type : "datetime"
        });
        okLoading.close($);
        var userTable = table.render({
            elem : '#tableId',
            url : "/api/maintenance/list",
            limit : 20,
            page : true,


            size : "sm",
            cols : [ [ {
                type : "checkbox",
                fixed : "left"
            }, {
                field : "dictId",
                title : "ID",
                width : 160,
                sort : true
            }, {
                field : "dictItemName",
                title : "名称",
                width : 100
            }, {
                field : "dictMemo",
                title : "备注",
                width : 200
            }, {
                field : "mainEnable",
                title : "添加时间",
                width : 150,
                templet: "#statusTpl"
            }, {
                title : "操作",
                width : 100,
                align : "center",
                fixed : "right",
                templet : "#operationTpl"
            } ] ],
            done : function(res, curr, count) {
                console.info(res, curr, count);
            }
        });

        form.on("submit(search)", function(data) {
            userTable.reload({
                where : data.field,
                page : {
                    curr : 1
                }
            });
            return false;
        });

        table.on("toolbar(tableFilter)", function(obj) {
            switch (obj.event) {
                case "batchEnabled":
                    batchEnabled();
                    break;
                case "batchDisabled":
                    batchDisabled();
                    break;
                case "batchDel":
                    batchDel();
                    break;
                case "add":
                    add();
                    break;
            }
        });

        table.on("tool(tableFilter)", function(obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.dictId);
                    break;
            }
        });


        //添加事件
        $(".addmain_btn").click(function(){
            layer.msg("打开添加事件");
            layui.layer.open({
                title:"添加物料名维护",
                type:2,
                area:['400px','300px'],
                content:"/page/add_name_maintenance"
            })
        })


        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function(index) {
                layer.close(index);
                var idsStr = okUtils.tableDeleteBatchCheck(table,"dictId");
                if (idsStr) {
                    okUtils.ajax("/api/problemType/delete", "post", {
                        idsStr : idsStr
                    }, true).done(function(response) {
                        console.log(response);
                        okUtils.tableSuccessMsg(response.msg);
                    }).fail(function(error) {
                        console.log(error)
                    });
                }
            });
        }

        function add() {
            okLayer.open("添加问题类型", "/page/problemType/add", "90%", "90%", null,
                function() {
                    userTable.reload();
                })
        }

        function edit(data) {
            okLayer.open("更新问题类型", "/page/problemType/edit", "90%", "90%", function(
                layero) {
                console.log(data);
                var iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);
            }, function() {
                userTable.reload();
            })
        }

        function del(dictId) {
            okLayer.confirm("确定要删除吗？", function() {
                okUtils.ajax("/api/problemType/delete", "post", {
                    idsStr : dictId
                }, true).done(function(response) {
                    console.log(response);
                    okUtils.tableSuccessMsg(response.msg);
                }).fail(function(error) {
                    console.log(error)
                });
            })
        }
    })
</script>
<!-- 头工具栏模板 -->

<!-- 行工具栏模板 -->
<script type="text/html" id="statusTpl">
    {{#  if(d.dictEnable == 0){ }}
    <span class="layui-btn layui-btn-warm layui-btn-xs">停用</span>
    {{#  } else if(d.dictEnable == 1) { }}
    <span class="layui-btn layui-btn-normal layui-btn-xs">启用</span>
    {{#  } }}
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>


</body>
</html>
